.box {
  width: 375rpx;
  height: 600rpx;
  background-color: lightblue;
}

.box1 {
  width: 375rpx;
  height: 500rpx;
  background-color: rgb(219, 112, 79);
}

page {
  height: 100vh;
  background-color: #efefef !important;
}

swiper {
  swiper-item {
    image {
      width: 100%;
      height: 100%;
    }

    // 在 Sass 拓展语言中，& 符号表示父选择器的引用。它用于在嵌套的选择器中引用父选择器
    // 下面这段代码在编译以后，生成的代码是 swiper-item:first-child
    // &:first-child {
    //   background-color: skyblue;
    // }

    // &:nth-child(2) {
    //   background-color: lightcoral;
    // }

    // &:last-child {
    //   background-color: lightseagreen;
    // }
  }
}

.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16rpx 0rpx;
  padding: 20rpx;
  font-size: 24rpx;
  background-color: #fff;
  border-radius: 10rpx;

  text {
    font-size: 24rpx;
  }

  .iconfont {
    font-size: 24rpx;
  }
}

// 商品导航区域
.goods-nav {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;

  navigator {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  image {
    width: 80rpx;
    height: 80rpx;
  }

  text {
    font-size: 24rpx;
    margin-top: 12rpx;
  }
}

.goods-hot {
  background-color: #fff;
  padding: 16rpx;
  border-radius: 10rpx;
  font-size: 24rpx;

  .scroll-x {
    width: 100%;
    white-space: nowrap;

    view {
      display: inline-block;
      width: 320rpx;
      height: 440rpx;
      margin-right: 16rpx;

      .good-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        text {
          &:nth-of-type(1) {
            font-weight: bold;
          }
        }
      }
      image {
        width: 100%;
        height: 320rpx;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }

  .scroll-y {
    height: 400rpx;
    background-color: lightsalmon;
    margin-top: 60rpx;

    view {
      height: 400rpx;

      &:nth-child(odd) {
        background-color: lightseagreen;
      }

      &:nth-child(even) {
        background-color: lightcoral;
      }
    }
  }
}

.custom-class {
  border: 10rpx solid lightseagreen !important;
}

.van-button--default {
  background-color: pink !important;
}

/* 声明局部的变量 */
/* 只有被当前类名容器包裹住的元素，使用该变量才生效 */
.container {
  --main-bg-color: lightseagreen;
}
.button-custom-class {
  background-color: var(--main-bg-color) !important;
  // background-color: black !important;
}

